﻿<script type="text/template" id="basicmenu-template">
    <el-container class="page-container p20">
        <el-header height="auto">
            <div class="tools-box">
                <div class="tools-box-buttons">
                    @Exhort.Backstage.Components.WorkControls.PageButtons(this)
                </div>
            </div>
        </el-header>
        <el-main class="table-box">
            <el-table height="100%" ref="table" :data="rows" row-key="ID" v-on:row-click="clickRow" default-expand-all border>
                <el-table-column prop="Icon" label="标题" width="220">
                    <template slot-scope="scope">
                        <el-radio v-model="currentRow" :label="scope.row">
                            <i :class="scope.row.Icon">{{scope.row.Title}}</i>
                        </el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="Type" label="类型" width="100" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Type=='null'">无</span>
                        <span v-else-if="scope.row.Type=='href'">页面</span>
                        <span v-else-if="scope.row.Type=='embed'">内嵌</span>
                        <span v-else-if="scope.row.Type=='dialog'">弹框</span>
                        <span v-else-if="scope.row.Type=='iframe'">网页</span>
                        <span v-else>未知</span>
                    </template>
                </el-table-column>
                <el-table-column prop="Module" label="模块" width="100" align="center"></el-table-column>
                <el-table-column prop="Value" label="标记" width="180" align="center"></el-table-column>
                <el-table-column prop="Src" label="链接" align="center"></el-table-column>
                <el-table-column prop="IsEnabled" label="启用" width="80" align="center">
                    <template slot-scope="scope">
                        <i v-if="scope.row.IsEnabled" class="el-icon-circle-check color-success"></i>
                        <i v-else class="el-icon-remove-outline color-danger"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="Sequence" label="排序" width="80" align="center"></el-table-column>
            </el-table>
        </el-main>
        <el-dialog ref="dialog" :title="model.ID?'修改':'新增'" :visible.sync="dialogVisible" :close-on-click-modal="false" width="500px">
            <el-form ref="form" :rules="rules" :model="model" label-width="80px">
                <el-form-item prop="Title" label="菜单标题">
                    <el-input v-model="model.Title"></el-input>
                </el-form-item>
                <el-form-item prop="Icon" label="菜单图标">
                    <el-autocomplete ref="icon" v-model="model.Icon" :fetch-suggestions="getIcons" popper-class="page-select-icon" style="width:100%">
                        <template slot-scope="{item}">
                            <i :class="item.value"></i>
                        </template>
                        <template slot="prepend">
                            <i :class="model.Icon"></i>
                        </template>
                    </el-autocomplete>
                </el-form-item>
                <el-form-item prop="Pid" label="选择父级">
                    <el-cascader :options="pidItems" v-model="model.Pid" style="width:100%"
                                 :props="{checkStrictly:true,emitPath:false,value:'ID',label:'Title'}"></el-cascader>
                </el-form-item>
                <el-form-item prop="Type" label="菜单类型">
                    <el-radio-group v-model="model.Type">
                        <el-radio label="null">无</el-radio>
                        <el-radio label="href">页面</el-radio>
                        <el-radio label="embed">内嵌</el-radio>
                        <el-radio label="dialog">弹框</el-radio>
                        <el-radio label="iframe">网页</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="IsEnabled" label="是否启用">
                    <el-switch v-model="model.IsEnabled"></el-switch>
                </el-form-item>
                <el-form-item prop="Module" label="所属模块">
                    <el-input v-model="model.Module"></el-input>
                </el-form-item>
                <el-form-item prop="Value" label="菜单标记">
                    <el-input v-model="model.Value"></el-input>
                </el-form-item>
                <el-form-item prop="Src" label="链接地址">
                    <el-input v-model="model.Src"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogVisible=false">关闭</el-button>
                <el-button type="primary" v-on:click="submitForm">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog ref="transfer" title="配置" :visible.sync="transferVisible" :close-on-click-modal="false" width="622px">
            <el-transfer v-model="transferValue" :data="transferData" :titles="['备选功能', '已选功能']"
                         :props="{key:'ID',label:'Title'}" target-order="push"></el-transfer>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="transferVisible=false">关闭</el-button>
                <el-button type="primary" v-on:click="setAssign">确定</el-button>
            </div>
        </el-dialog>
    </el-container>
</script>
<script type="text/javascript">
    var basicmenu = {
        template: "#basicmenu-template",
        data: function () {
            return {
                rows: [],
                pidItems: [],
                currentRow: null,
                model: {
                    ID: "",
                    Pid: "0",
                    Title: "",
                    Icon: "",
                    Type: "null",
                    Module: "",
                    Value: "",
                    Src: "",
                    IsEnabled: true
                },
                transferData: [],
                transferValue: [],
                transferVisible: false,
                rules: {
                    Title: [{ required: true, message: "请填写菜单标题", trigger: "blur" }],
                    Pid: [{ required: true, validator: this.validatorPid, trigger: "change" }]
                },
                dialogVisible: false
            }
        },
        methods: {
            loadList: function () {
                var that = this;
                workVue.ajax({
                    url: "/basic/menu/grid",
                    target: that.$el,
                    success: function (result) {
                        that.rows = result.data || [];
                        that.pidItems = [{
                            ID: "0",
                            Icon: "el-icon-remove-outline",
                            Title: "无父级"
                        }];
                        that.pidItems = that.pidItems.concat(that.rows);
                    }
                });
                that.currentRow = null;
            },
            clickRow: function (row) {
                this.currentRow = row;
            },
            resetModel: function () {
                this.model = {
                    ID: "",
                    Pid: "0",
                    Title: "",
                    Icon: "",
                    Type: "null",
                    Module: "",
                    Value: "",
                    Src: "",
                    IsEnabled: true
                };
            },
            insert: function () {
                var that = this;
                that.resetModel();
                that.$nextTick(function () {
                    that.$refs.form.clearValidate();
                    that.$refs.icon.handleChange = function () { };
                });
                that.dialogVisible = true;
            },
            update: function () {
                var that = this;
                if (that.currentRow) {
                    that.insert();
                    workVue.ajax({
                        url: "/basic/menu/get",
                        data: { id: that.currentRow.ID },
                        target: that.$refs.dialog.$el,
                        success: function (result) {
                            that.model = result.data;
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            getIcons: function (query, callback) {
                var filter = function (icon) {
                    return icon.value.toLowerCase().indexOf(query.toLowerCase()) != -1;
                };
                callback(query ? iconCls.filter(filter) : iconCls);
            },
            validatorPid: function (rule, value, callback) {
                var that = this;
                if (that.model.Pid == that.model.ID) {
                    callback(new Error("不能选择自己作为父级"));
                }
                else { callback(); }
            },
            submitForm: function () {
                var that = this;
                that.$refs.form.validate((valid) => {
                    if (valid) {
                        workVue.ajax({
                            url: "/basic/menu/save",
                            type: "post",
                            data: { model: that.model },
                            target: that.$refs.dialog.$el,
                            success: function (result) {
                                that.loadList();
                                that.dialogVisible = false;
                                that.$message.success(result.message);
                            }
                        });
                    }
                });
            },
            remove: function () {
                var that = this;
                if (that.currentRow) {
                    that.$confirm("删除数据后将不可恢复，是否继续？", "提示", {
                        type: "warning"
                    }).then(() => {
                        workVue.ajax({
                            url: "/basic/menu/remove",
                            type: "post",
                            data: { id: that.currentRow.ID },
                            target: that.$el,
                            success: function (result) {
                                that.loadList();
                                that.$message.success(result.message);
                            }
                        });
                    }).catch(() => { });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            order: function (order) {
                var that = this;
                if (that.currentRow) {
                    workVue.ajax({
                        url: "/basic/menu/setorder",
                        type: "post",
                        data: {
                            id: that.currentRow.ID,
                            order: order,
                            pid: that.currentRow.Pid
                        },
                        target: that.$el,
                        success: function (result) {
                            that.loadList();
                            that.$message.success(result.message);
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            reload: function () {
                this.loadList();
            },
            assignInit: function () {
                var that = this;
                workVue.ajax({
                    url: "/basic/function/gridall",
                    success: function (result) {
                        that.transferData = result.data;
                    }
                });
            },
            assign: function () {
                var that = this;
                if (that.currentRow) {
                    that.transferValue = [];
                    that.transferVisible = true;
                    workVue.ajax({
                        url: "/basic/function/gridbymenu",
                        data: { menuid: that.currentRow.ID },
                        target: that.$refs.transfer.$el,
                        success: function (result) {
                            that.transferValue = result.data;
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            setAssign: function () {
                var that = this;
                workVue.ajax({
                    url: "/basic/menu/setassign",
                    type: "post",
                    data: {
                        id: that.currentRow.ID,
                        values: that.transferValue
                    },
                    target: that.$refs.transfer.$el,
                    success: function (result) {
                        that.transferVisible = false;
                        that.$message.success(result.message);
                    }
                });
            },
            enable: function (bit) {
                var that = this;
                if (that.currentRow) {
                    workVue.ajax({
                        url: "/basic/menu/enable",
                        type: "post",
                        data: { id: that.currentRow.ID, bit: bit, },
                        target: that.$el,
                        success: function (result) {
                            that.loadList();
                            that.$message.success(result.message);
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            }
        },
        mounted: function () {
            this.loadList();
            this.assignInit();
        }
    }
</script>